<template>
  <div>
    <h2>房源列表</h2>
    <el-form :model="queryParams" label-width="100px" class="demo-ruleForm" :inline="true">
      <el-form-item label="名称" prop="houseName">
        <el-input v-model="queryParams.houseName" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-button
      style="float: right;margin-right: 80px"
      type="warning" icon="el-icon-download"
      size="mini"
      @click="loginOut"
    >登陆
    </el-button>

    <el-table
      :data="houseList"
      @selection-change="handleSelectionChange"
      style="width: 100%"
      highlight-current-row>
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="房源名称" align="center" prop="houseName"/>
      <el-table-column label="所属楼盘" align="center" prop="housingName"/>
      <el-table-column label="租赁方式" align="center" prop="rentMethod">
        <template v-slot="scope">
          <span v-if="scope.row.rentMethod === 1">整租</span>
          <span v-if="scope.row.rentMethod === 2">合租</span>
        </template>
      </el-table-column>
      <el-table-column label="房源状态" align="center" prop="houseStatus">
        <template v-slot="scope">
          <span v-if="scope.row.houseStatus === 0">已出租</span>
          <span v-if="scope.row.houseStatus === 1">未出租</span>
        </template>
      </el-table-column>
      <el-table-column label="楼号/单元号/门牌号" width="180px" align="center" prop="buildingNum">
        <template v-slot="scope">
          {{ scope.row.buildingNum }}/{{ scope.row.buildingUnit }}/{{ scope.row.buildingFloorNum }}
        </template>
      </el-table-column>
      <el-table-column label="户型" align="center" prop="houseType"/>
      <el-table-column label="装修" align="center" prop="decoration">
        <template v-slot="scope">
          <span v-if="scope.row.decoration === 1">精装</span>
          <span v-if="scope.row.decoration === 2">简装</span>
          <span v-if="scope.row.decoration === 3">毛坯</span>
        </template>
      </el-table-column>
      <el-table-column label="楼层" align="center" prop="floor"/>
      <el-table-column label="租金" align="center" prop="rent"/>
      <el-table-column label="付款方式" align="center" prop="paymentMethod">
        <template v-slot="scope">
          <span v-if="scope.row.paymentMethod === 1">付一押一</span>
          <span v-if="scope.row.paymentMethod === 2">付三押一</span>
          <span v-if="scope.row.paymentMethod === 3">付六押一</span>
          <span v-if="scope.row.paymentMethod === 4">年付押一</span>
          <span v-if="scope.row.paymentMethod === 5">其它</span>
        </template>
      </el-table-column>
      <el-table-column label="房产面积" align="center" prop="coveredArea"/>
      <el-table-column label="朝向" align="center" prop="orientation"/>
      <el-table-column label="房间区域图片" align="center" prop="roomPic"/>
      <el-table-column label="公共区域图片" align="center" prop="areaPic"/>
      <el-table-column label="联系人" align="center" prop="contact"/>
      <el-table-column label="手机号" align="center" prop="mobile"/>
      <el-table-column label="看房时间" align="center" prop="time">
        <template v-slot="scope">
          <span v-if="scope.row.time === 1">上午</span>
          <span v-if="scope.row.time === 2">中午</span>
          <span v-if="scope.row.time === 3">下午</span>
          <span v-if="scope.row.time === 4">晚上</span>
          <span v-if="scope.row.time === 5">全天</span>
        </template>
      </el-table-column>
      <el-table-column label="用户姓名" align="center" prop="userName"/>
      <el-table-column label="省/市/县" align="center">
        <template v-slot="scope">
          {{ scope.row.sheng }}/{{ scope.row.shi }}/{{ scope.row.xian }}
        </template>
      </el-table-column>
      <el-table-column label="详细地址" align="center" prop="address"/>
      <el-table-column label="房源标签类型" width="180px" align="center" prop="labelType"/>
      <el-table-column label="房东姓名" align="center" prop="landlordName"/>
      <el-table-column label="房源介绍" align="center" prop="houseDesc"/>
      <el-table-column label="发布状态" align="center" prop="publishStatus">
        <template v-slot="scope">
          <span v-if="scope.row.publishStatus === 0">已发布</span>
          <span v-if="scope.row.publishStatus === 1">未发布</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-delete" @click="yuHouse(scope.row.id)">预约看房</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="zuHouse(scope.row.id)">租赁房源</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
export default {
  name: 'ListView',
  data () {
    return {
      houseList: [], // 房源数据
      multipleSelection: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  methods: {
    // 预约看房
    yuHouse () {
    },
    // 租房
    zuHouse () {
    },
    // 列表
    getList () {
      this.axios.get('/house/house/list', {
        params: {
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize
        }
      }).then(res => {
        this.houseList = res.data.rows
        this.total = res.data.total
      })
    },
    // 搜索
    handleQuery () {

    },
    // 重置
    resetQuery () {

    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    loginOut () {
      this.$router.push('/login')
    }
  },
  created () {
    this.getList()
  }
}
</script>

<style scoped>

</style>
